<template>
  <v-container fluid tag="section">
    <v-row justify="center">
      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="primary"
          icon="mdi-twitter"
          title="服务器"
          :value="state.world"
          sub-icon="mdi-clock"
          sub-text="Just Updated"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="info"
          icon="mdi-poll"
          title="端口"
          :value="state.port+''"
          sub-icon="mdi-tag"
          sub-text="Tracked from Google Analytics"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="success"
          icon="mdi-clock"
          title="运行时间"
          :value="state.uptime"
          sub-icon="mdi-calendar"
          sub-text="Last 24 Hours"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="orange"
          icon="mdi-sofa"
          title="在线玩家"
          :value="state.playercount+'/'+state.maxplayers"
          sub-icon="mdi-alert"
          sub-icon-color="red"
          sub-text="Get More Space..."
        />
      </v-col>

      <v-col cols="12" md="6">
        <base-material-card color="warning" class="px-5 py-3">
          <template v-slot:heading>
            <div class="display-2 font-weight-light">公告版</div>
            <div class="subtitle-1 font-weight-light">服务器的公告信息</div>
          </template>
          <v-card-text>
            <div
              class="subtitle-1 font-weight-light"
              v-for="(item , index) in serverRules"
              :key="index"
            >
              <strong>{{index+1}}:{{item}}</strong>
            </div>
          </v-card-text>
        </base-material-card>
      </v-col>

      <v-col cols="12" md="6">
        <base-material-card color="primary" class="px-5 py-3">
          <template v-slot:heading>
            <div class="display-2 font-weight-light">快速广播</div>
            <div class="subtitle-1 font-weight-light">发送一条信息到服务器，不可使用命令，没有返回信息</div>
          </template>
          <v-card-text>
            <v-form ref="form1" @submit="postBroadcast">
              <v-text-field
                label="输入信息"
                v-model="msg"
                append-outer-icon="mdi-send"
                @click:append-outer="postBroadcast"
                :rules="[v => !!v || '不能为空']"
              ></v-text-field>
            </v-form>
          </v-card-text>
        </base-material-card>
      </v-col>
      <v-col cols="12">
        <v-card class="mx-auto">
          <v-card-text>
            <div class="display-2 font-weight-light">执行命令</div>
            <p class="display-1 text--primary">就是字面意思，部分命令没有返回消息</p>
            <br />
            <div
              class="text--primary"
              v-for="(item ,index) in serverMsg"
              :key="index"
            >&#62; {{item}}</div>
          </v-card-text>
          <v-card-text>
            <v-form ref="form2" @submit="postCmd">
              <v-text-field
                label="输入命令"
                v-model="v_cmd"
                append-outer-icon="mdi-send"
                @click:append-outer="postCmd"
                :rules="[v => !!v || '不能为空']"
              ></v-text-field>
            </v-form>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      state: {
        world: "null",
        port: 0,
        uptime: "0",
        playercount: 0,
        maxplayers: 0,
      },
      serverRules: [],
      msg: "123456",
      v_cmd: "cmd text",
      serverMsg: [],
    };
  },
  mounted() {
    let ttime = new Date("0.00:30:37");
    // console.log(ttime.getTime());

    this.request
      .get("/v2/server/status?token=" + this.$store.state.token)
      .then((res) => {
        this.state = res;
      })
      .catch((error) => {
        // this.loading = false;
      });

    //获取公告信息
    this.request
      .get("/v3/server/rules?token=" + this.$store.state.token)
      .then((res) => {
        this.serverRules = res.rules;
      })
      .catch((error) => {
        // this.loading = false;
      });
  },
  methods: {
    submit() {
      console.log(this.$refs.form.validate());
      console.log(this.FormData);
    },
    postBroadcast() {
      if (this.$refs.form1.validate()) {
      this.request
        .get(
          "/v2/server/broadcast?token=" +
            this.$store.state.token +
            "&msg=" +
            this.msg
        )
        .then((res) => {
          this.msg = "";
        })
        .catch((error) => {
          // this.loading = false;
        });
      }

    },
    postCmd() {
      if (this.$refs.form2.validate()) {

        let cmd = this.v_cmd;
        if (cmd.indexOf("/") == -1) {
          this.v_cmd = "/" + this.v_cmd;
        }

        this.request
          .get(
            "/v3/server/rawcmd?token=" +
              this.$store.state.token +
              "&cmd=" +
              this.v_cmd
          )
          .then((res) => {
            // this.v_cmd = "";
            this.v_cmd = "";
            res.response.forEach((value) => {
              this.serverMsg.push(value);
            });
            //再push一行回车
            this.serverMsg.push("---------------");
          })
          .catch((error) => {
            // this.loading = false;
          });
      }
    },
  },
};
</script>

<style>
</style>